<template>
        <el-form-item label="频道" prop="channel_id">
        <el-select
        clearable
        placeholder="请选择活动区域"
        @change='hChange'
         v-model="channelId">
          <el-option
          v-for="channel in channels"
          :key="channel.id"
           :label="channel.name"
            :value="channel.id"></el-option>
        </el-select>
      </el-form-item>
</template>

<script>
export default {
  name: 'MyChannel',
  props: ['value'], // 在子组件中接受父组件的数据
  data () {
    return {
      channelId: '',
      channels: []
    }
  },
  created () {
    this.loadChannels()
  },
  watch: {
    // 当数据变化时，这个函数会自动调用，并传入变化前后的 旧值和新值。
    // 这里的value不是data中的数据，而是props中的定义的
    // 它是父组件中使用v-model时（语法糖,它相当于给子组件传入一个名为value的prop）传入的
    value (newVal, oldVal) {
      console.log('传入的数据value变化了', oldVal, newVal)
      // 更新- 显示从父组件中传入的频道
      this.channelId = newVal
    }
  },
  methods: {
    hChange (val) {
      console.log('用户在子组件中选则的频道是', val)
      // 抛出事件并传递数据
      this.$emit('input', val)
    },
    async loadChannels () {
      try {
        const res = await this.$axios({
          method: 'GET',
          url: '/mp/v1_0/channels'
        })
        console.log('获取频道信息', res)
        this.channels = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style>

</style>
